É un p'o complicato da spiegare se non sei pratico di javascript. Nell nuovo IExplorer e firefox lo puoi fare anche solo con css, altrimenti devi usare javascript!
Questo é il codice di una pagina che ho fatto(Scusa per il testo in tedesco
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#Rahmen {
width: 540px;
padding: 1px;
padding-left:0px;
border: 0px none black;
background-color: transparent;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
margin-left:2px;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 60px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid white;
color: white; background-color: black;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 5.95em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
body {
background-image: url(logo.JPG);
background-repeat: repeat;
}
</style>
<script type="text/javascript">
var defaultFoto = "none";
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block";UL.style.backgroundImage = "url(bg.gif)";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
document.getElementById("FotoPrew").style.backgroundImage = defaultFoto;
}
window.onload=hoverIE;
}
function changeFoto(Foto)
{
document.getElementById("FotoPrew").style.backgroundImage = 'url(icons/' + Foto + '.gif)';
}
function setDefault(Foto)
{
//defaultFoto = 'url(icons/' + Foto + '.png)';
}
</script>
<body topmargin="0px" rightmargin="0px" leftmargin="0px" bgcolor="black" style=";color:White;font-family:Verdana,Arial;font-size:10px">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="816px" height="600px">
<tr>
<td rowspan="4" style="background-image:url(border.gif);width:8px"> </td>
<td colspan="2" style="background-image:url(bordert.gif);height:8px"></td>
<td rowspan="4" style="background-image:url(borderr.gif);height:8px"> </td>
</tr>
<tr>
<td height="68px" width="252" style="background-image:url(g/a1.gif)"> </td>
<td height="68px" width="548" style="background-image:url(g/b1.jpg);">
<div id="FotoPrew" style="margin-left:480px;height:50px;width:50px;background-image:none"></div> </td>
</tr>
<tr>
<td height="36px" width="252" style="background-image:url(g/a2.gif)"> </td>
<td height="36px" width="548" style="background-image:url(g/b2.gif)" valign="top">
<div id="Rahmen"><ul id="Navigation">
<li><a href="i/home/home.htm" target="frame" onmouseover="javascript:changeFoto('team')">Home</a></li>
<li><a href="#" onmouseover="javascript:changeFoto('team')">Club</a>
<ul>
<li><a href="i/team/club-story-i.htm" target="frame" onmouseover="javascript:changeFoto('team')">Story</a></li>
<li><a href="i/team/club-i.htm" target="frame" onmouseover="javascript:changeFoto('team')" >Foto</a></li>
<li><a href="i/team/sponsors-i.htm" target="frame" onmouseover="javascript:changeFoto('team')" >Sponsors</a></li>
</ul></li>
<li><a href="#" onmouseover="javascript:changeFoto('team')">Riders</a>
<ul>
<li><a href="i/team/bobo-i.htm" target="frame" onmouseover="javascript:changeFoto('bobo')" onclick="javascript:setDefault('bobo')">Bobo</a></li>
<li><a href="i/team/dagai-i.htm" target="frame" onmouseover="javascript:changeFoto('dagai')" onclick="javascript:setDefault('dagai')">Dagai</a></li>
<li><a href="i/team/damian-i.htm" target="frame" onmouseover="javascript:changeFoto('damian')" onclick="javascript:setDefault('damian')">Damian</a></li>
<li><a href="i/team/dani-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Dani</a></li>
<li><a href="i/team/dursa-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Dursa</a></li>
<li><a href="i/team/gio-i.htm" target="frame" onmouseover="javascript:changeFoto('gio')" onclick="javascript:setDefault('gio')">Gio</a></li>
<li><a href="i/team/guz-i.htm" target="frame" onmouseover="javascript:changeFoto('guz')" onclick="javascript:setDefault('guz')">Guz</a></li>
<li><a href="i/team/jo-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Jo</a></li>
<li><a href="i/team/julian-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Juli</a></li>
<li><a href="i/team/lux-i.htm" target="frame" onmouseover="javascript:changeFoto('lux')" onclick="javascript:setDefault('lux')">Lux</a></li>
<li><a href="i/team/mirko-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Mirko</a></li>
<li><a href="i/team/philipp-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Philipp</a></li>
<li><a href="i/team/robbi-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Robbi</a></li>
<li><a href="i/team/schmid-i.htm" target="frame" onmouseover="javascript:changeFoto('schmid')" onclick="javascript:setDefault('schmid')">Schmid</a></li>
<li><a href="i/team/stefan-i.html" target="frame" onmouseover="javascript:changeFoto('nopic')">Stefan</a></li>
</ul>
</li>
<li><a href="#" onmouseover="javascript:changeFoto('gallery')">Gallery</a>
<ul>
<li><a href="gallery/06-07.htm" target="frame" onmouseover="javascript:changeFoto('gallery')">Video 2006/07</a></li>
<li><a href="fotoalbum/fotoalbum 06-07neu/bilder/index.htm" target="frame" onmouseover="javascript:changeFoto('gallery')">Foto 2006/07</a></li>
</ul>
</li>
<li><a href="i/links/links.htm" target="frame" >Contact us</a></li>
<li><a href="public/webmaster/guestbook/buch.html" target="frame">Guestbook</a>
</ul>
</li>
</ul>
</div> </td>
Grazie mille!
Pero non riesco a capire quale sia la funzione che fa comparire la tendina..:stordita:
vedo che sui pulsanti richiami la funzione changeFoto che, credo, servi per cambiare la foto sulla pagina (e che io non posso vedere in locale :D )
grazie ancora per la disponibilità!
ciao